<script setup>
import { ArrowLeft, Delete, Edit } from '@element-plus/icons-vue'
import Message from 'vue-m-message'
import { deepClone, tableCheckChane } from '@/utils/index.js'
import BaseForm from '@/components/BaseForm/BaseForm.vue'
import customerFinanceInformationService from '@/api/customerFinanceInformation/index.js'
import Toolbar from '@/components/Toolbar/Toolbar.vue'
import customerService from '@/api/customerInformation/index.js'

const tableData = ref([])
const tableColumn = reactive([
  { type: 'checkbox', width: 50 },
  {
    title: '客户名称',
    field: 'customerName',
    align: 'center',
    minWidth: 200,
    showOverflow: 'tooltip',
  },
  {
    title: '所属期数',
    field: 'periods',
    align: 'center',
  },
  {
    title: '销售收入(元)',
    field: 'salesRevenue',
    align: 'center',
  },
  {
    title: '净资产(元)',
    field: 'netAsset',
    align: 'center',
  },
  {
    title: '研发费用(元)',
    field: 'rdCost',
    align: 'center',
  },
  {
    title: '利润额(元)',
    field: 'profit',
    align: 'center',
  },
  {
    title: '负债额(元)',
    field: 'liabilities',
    align: 'center',
  },
  {
    title: '纳税额(元)',
    field: 'ratal',
    align: 'center',
  },
  {
    title: '备注',
    field: 'remark',
    align: 'center',
  },
  {
    field: 'actions',
    align: 'center',
    title: '操作',
    slots: {
      default: 'actions',
    },
    minWidth: 40,
  },
])
const ids = ref([])
const route = useRoute()
const { customerId } = route.query
const customerInfoData = ref({})
const pagerConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
const updateDialogVisible = ref(false)
const updateFormList = ref([
  {
    label: '客户名称',
    disabled: true,
    field: 'customerName',
    type: 'input',
  },
  {
    label: '所属期数',
    field: 'periods',
    type: 'input',
  },
  {
    label: '销售收入(元)',
    field: 'salesRevenue',
    type: 'number',
    suffix: '元',
  },
  {
    label: '净资产(元)',
    field: 'netAsset',
    type: 'number',
    suffix: '元',
  },
  {
    label: '研发费用(元)',
    field: 'rdCost',
    type: 'number',
    suffix: '元',
  },
  {
    label: '利润额(元)',
    field: 'profit',
    type: 'number',
    suffix: '元',
  },

  {
    label: '负债额(元)',
    field: 'liabilities',
    type: 'number',
    suffix: '元',
  },
  {
    label: '纳税额(元)',
    field: 'ratal',
    type: 'number',
    suffix: '元',
  },
  {
    label: '备注',
    field: 'remark',
    type: 'textarea',
    span: 24,
  },
])
const updateFormModel = ref({})
const { proxy } = getCurrentInstance()

onMounted(() => {
  handleGetCustomerInfo()
  getList()
})

function handleGetCustomerInfo() {
  customerService.getDetail(customerId).then((res) => {
    customerInfoData.value = res.data
  })
}

function getList() {
  const params = {
    pageSize: pagerConfig.value.pageSize,
    pageNum: pagerConfig.value.currentPage,
    customerId,
  }
  customerFinanceInformationService.list(params).then((res) => {
    const { rows, total } = res
    tableData.value = rows
    pagerConfig.value.total = total
  })
}

function handleAdd() {
  updateFormModel.value.customerName = customerInfoData.value.customerName
  updateFormModel.value.customerId = customerId
  updateDialogVisible.value = true
}

function handleBack() {
  window.history.back()
}

function handleReset() {
  updateDialogVisible.value = false
  updateFormModel.value = {}
}

function handlePageChange({ currentPage, pageSize }) {
  pagerConfig.value.currentPage = currentPage
  pagerConfig.value.pageSize = pageSize
  handleGetCustomerInfo()
  getList()
}

function handleUpdateSubmit(e) {
  if (e.scfiId) {
    customerFinanceInformationService.edit(e).then((res) => {
      const code = res.code
      if (code === 200) {
        Message.success('修改成功')
        handleReset()
        handleGetCustomerInfo()
        getList()
      }
    })
  }
  else {
    customerFinanceInformationService.add(e).then((res) => {
      const code = res.code
      if (code === 200) {
        Message.success('新增成功')
        handleReset()
        handleGetCustomerInfo()
        getList()
      }
    })
  }
}

function handleEditForm(row) {
  updateFormModel.value = deepClone(row)
  updateDialogVisible.value = true
}

function handleDelete(row) {
  let delId
  if (row) {
    delId = row.scfiId
  }
  else {
    delId = ids.value.join(',')
  }
  customerFinanceInformationService.delete(delId).then((res) => {
    const code = res.code
    if (code === 200) {
      Message.success('删除成功')
      handleGetCustomerInfo()
      getList()
    }
  })
}
function handleCheckChange(data) {
  ids.value = tableCheckChane(data, 'scfiId')
}

function handleExport() {
  proxy.download('system/customerFinanceInformation/export', { exportIds: ids.value.join(',') }, `customerFinanceInformation_${new Date().getTime()}.xlsx`)
}
</script>

<template>
  <div class="app-container custom-container">
    <el-card shadow="never">
      <el-page-header :icon="ArrowLeft" @back="handleBack">
        <template #content>
          <span class="text-large font-600 mr-3"> 客户信息 </span>
        </template>
        <el-descriptions size="large" class="mt-4">
          <el-descriptions-item label="客户名称">
            {{ customerInfoData.customerName }}
          </el-descriptions-item>
          <el-descriptions-item label="所属区域">
            {{ customerInfoData.locationArea }}
          </el-descriptions-item>
          <el-descriptions-item label="详细地址">
            {{ customerInfoData.address }}
          </el-descriptions-item>
          <el-descriptions-item label="开户行账号">
            {{ customerInfoData.bankAccount }}
          </el-descriptions-item>
          <el-descriptions-item label="开票电话">
            {{ customerInfoData.invoicePhone }}
          </el-descriptions-item>
          <el-descriptions-item label="开户行名称">
            {{ customerInfoData.bankName }}
          </el-descriptions-item>
        </el-descriptions>
      </el-page-header>
    </el-card>
    <el-card shadow="never" class="mt-2">
      <Toolbar>
        <el-button
          v-hasPermi="['system:customerFinanceInformation:add']"
          type="primary"
          class="el-gradient-primary"
          @click="handleAdd"
        >
          新增
          <el-icon class="el-icon--right">
            <CirclePlusFilled />
          </el-icon>
        </el-button>
        <el-button
          v-hasPermi="['system:customerFinanceInformation:remove']"
          type="danger"
          class="el-gradient-danger"
          :disabled="ids.length === 0"
          @click="handleDelete(null)"
        >
          删除
          <el-icon class="el-icon--right">
            <Delete />
          </el-icon>
        </el-button>
        <el-button
          v-hasPermi="['system:customerFinanceInformation:export']"
          type="warning"
          class="el-gradient-warning"
          @click="handleExport()"
        >
          导出
          <el-icon class="el-icon--right">
            <FolderAdd />
          </el-icon>
        </el-button>
      </Toolbar>
      <vxe-grid
        :data="tableData"
        :columns="tableColumn"
        :pager-config="pagerConfig"
        header-cell-class-name="headerCellClass"
        :row-config="{
          keyField: 'scfiId',
        }"
        @page-change="handlePageChange"
        @checkbox-all="handleCheckChange"
        @checkbox-change="handleCheckChange"
      >
        <template #actions="{ row }">
          <el-button
            v-hasPermi="['system:customerFinanceInformation:remove']"
            text
            type="success"
            size="small"
            :icon="Edit"
            @click="handleEditForm(row)"
          >
            修改
          </el-button>
          <el-divider direction="vertical" />
          <span v-hasPermi="['system:customerFinanceInformation:edit']">
            <el-popconfirm :title="`确认删除 ${row.customerName} 的客户信息吗？`" width="200px" @confirm="handleDelete(row)">
              <template #reference>
                <el-button text size="small" type="danger" :icon="Delete">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </span>
        </template>
      </vxe-grid>
    </el-card>
    <el-dialog
      v-model="updateDialogVisible"
      :destroy-on-close="true"
      class="custom-dialog"
      draggable
      @close="handleReset"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px] ">
            {{ updateFormModel.scfiId ? '修改' : '添加' }}客户财务信息记录
          </span>
        </div>
      </template>
      <BaseForm :field-list="updateFormList" :model="updateFormModel" @submit="handleUpdateSubmit" @cancel="handleReset" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.dialog-header{
  width: 250px;
}
.custom-container{
  :deep(.el-card__body){
    padding-bottom: 0;
  }
}
</style>
